<template>
    <div class="home-big-box">
        <TheCesiumMap v-model="pondId"/>
        <div class="group-blur"></div>

        <TheTotal class="total-big-box" v-model="pondId"/>
        <!--         <TheTitle class="title-big-box" />-->
        <TheLeft class="left-big-box" />
        <TheRight class="right-big-box" />
    </div>
</template>

<script>
import TheCesiumMap from "../group/component/TheCesiumMap";
import TheTotal from "./component/TheTotal";
// import TheTitle from "./component/TheTitle";
import TheLeft from "./component/TheLeft";
import TheRight from "./component/TheRight";

export default {
    name: "index",
    data() {
      return {
        pondId: null,//选中的尾矿id
      }
    },
    components: {
        TheCesiumMap,
        TheTotal,
        // TheTitle,
        TheLeft,
        TheRight,
    },
};
</script>

<style lang="scss">
@import "~@/public/style/index.scss";
@import "~@/asset/style/common.scss";
</style>
<style lang="scss" scoped>
.home-big-box {
    position: relative;
    width: 100%;
    height: 100%;
    .total-big-box {
        position: absolute;
        width: 500px;
        height: 54px;
        top: 100px;
        left: 710px;
    }
    .title-big-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 85px;
    }

    .left-big-box {
        position: absolute;
        top: 85px;
        left: 0;
        width: 395px;
        height: calc(100% - 85px);
        padding: 15px 0 30px 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .right-big-box {
        position: absolute;
        top: 85px;
        right: 0;
        width: 395px;
        height: calc(100% - 85px);
        padding: 15px 10px 30px 0;
    }

    .group-blur {
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to left, #050f1f 5%, transparent 30%),
            linear-gradient(to bottom, #08172d 1%, transparent 25%),
            linear-gradient(to right, #08172d 5%, transparent 30%),
            linear-gradient(to top, #050f1f 2%, transparent 30%);
    }
}
</style>
